<template>
  <div>
     <breadcrumb></breadcrumb>
     <el-divider content-position="left">预约管理</el-divider>
     <el-table
    :data="reservats.result"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="preTime"
      label="预约时间"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="uname"
      label="预约姓名"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="phone"
      label="预约人电话"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="bodNumber"
      label="携带人数"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="westerndetail"
      label="预约商品"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="store"
      label="预约店铺"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="cause"
      label="预约结果"
      align="center"
    >
    </el-table-column>
  </el-table>  
  <br>
    <!-- 分页 -->
    <el-pagination
      background
      :total=reservats.total
      :page-size=reservats.pagesize
      layout=" ->,prev, pager, next,total,jumper"
      @current-change="ChangCurrentPage"
    >
    </el-pagination>
   
  
  </div>
</template>

<script>
import breadcrumb  from '../components/breadcrumb';
import httpApi from "@/http";
  export default {
    components:{ breadcrumb},
    data() {
      return {
        reservats:{
            page: 1,
            pagesize:5,
            result:[],
            total:1
          },
      }
    },
    methods: {
        // 数据
        Reservat(){
          let params = {page: this.reservats.page ,pagesize: this.reservats.pagesize}
          httpApi.reservatApi.queryReservat(params).then(res =>{
            console.log("店铺列表",res);
            this.reservats = res.data.data
          })
        },
        //变化当前页
        ChangCurrentPage(page){
            // console.log("当前页数",page);
            this.reservats.page = page
            this.Reservat()
        },
        tableRowClassName({row, rowIndex}) {
        if (row.finish === 2) {
          return 'warning-row';
        } else if (row.finish === 1) {
          return 'success-row';
        }
        return '';
      }
    },
    mounted(){
      this.Reservat()
    },
  }
</script>

<style >
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>